

$(function(){
 
  var page=1;
  var pageSize=3;
  var arr=[];//定义个数组存储商品图片上传成功的结果

  render();

  function render(){
    $.ajax({
      url:'/product/queryProductDetailList',
      type:'get',
      data:{
        page:page,
        pageSize:pageSize
      },
      success:function(info){
        $('tbody').html(template('tmp',info));
  
        $('#paginator').bootstrapPaginator({
          bootstrapMajorVersion: 3,
          currentPage: page,
          totalPages:Math.ceil(info.total/info.size),
          onPageClicked: function(a, b, c, p) {
            page = p
            render()
          },
          size:'normal',
          itemTexts: function(type, page) {
            switch (type) {
              case 'first':
                return '首页'
              case 'prev':
                return '上一页'
              case 'page':
                return page
              case 'next':
                return '下一页'
              case 'last':
                return '尾页'
            }
          },
          tooltipTitles: function(type, page) {
            switch (type) {
              case 'first':
                return '首页'
              case 'prev':
                return '上一页'
              case 'page':
                return '跳转到' + page + '页'
              case 'next':
                return '下一页'
              case 'last':
                return '尾页'
            }
          },
          useBootstrapTooltip: true
        })
      }
    })
  }

  $('.btn-add').on('click',function(){
    $('#addModal').modal('show');
    //加载二级分类
    $.ajax({
      url:'/category/querySecondCategoryPaging',
      type:'get',
      data:{
        page:1,
        pageSize:200
      },
      success:function(info){
        $('.dropdown-menu').html( template('tmp2',info) )
      }

    })
  })

  // 二级分类选择功能
  $('.dropdown-menu').on('click','li',function(){
    
    $('.dropdown-text').html( $(this).children().html() );

    $('[name=brandId]').val($(this).data('id'));

    // 手动校验
    $("form").data('bootstrapValidator')
    .updateStatus('brandId', 'VALID')
  })

  // 商品图片上传功能
  $('#file').fileupload({
    dataType:"json",
    done:function(e,data){

      arr.push(data.result);

      if(arr.length>3){
        $('.img_box').append('&nbsp;&nbsp;<span>仅可上传3张,请不要继续上传!</span>')
        return
      }
      var src=data.result.picAddr;
      $('.img_box').append('<img src="'+src+'" width="100" height="100">');
      

      // 手动校验
      if(arr.length===3){
        $("form").data('bootstrapValidator')
        .updateStatus('imgStatu', 'VALID')
      }else{
        $("form").data('bootstrapValidator')
        .updateStatus('imgStatu', 'INVALID')
      }
      
    }
  })
  
  // 表单校验功能
  $('form').bootstrapValidator({
    //指定不校验类型
    excluded:[],
    //指定校验时的图标显示
    feedbackIcons:{
      valid: 'glyphicon glyphicon-thumbs-up',
      invalid: 'glyphicon glyphicon-thumbs-down',
      validating: 'glyphicon glyphicon-refresh'
    },
    //指定校验字段
    fields:{
      brandId:{
        validators:{
          notEmpty:{
            message:'亲,选择一个二级分类哦!'
          }
        }
      },
      proName:{
        validators:{
          notEmpty:{
            message:'请输入商品名称'
          }
        }
      },
      proDesc:{
        validators:{
          notEmpty:{
            message:'请输入商品描述'
          }
        }
      },
      num:{
        validators:{
          //不能为空
          notEmpty:{
            message:'请输入商品的库存'
          },
          // 正则校验
          regexp: {
            regexp: /^[1-9]{1,9}$/,
            message: '请输入合法的库存数量'
          }
        }
      },
      size:{
        validators:{
          notEmpty:{
            message:'请输入商品的尺码'
          },
          // 正则校验
          regexp: {
            regexp: /^\d{2}-\d{2}$/,
            message: '请输入正确的尺码格式(xx-xx)'
          }
        }
      },
      oldPrice:{
        validators:{
          notEmpty:{
            message:'请输入商品的原价'
          }
        }
      },
      price:{
        validators:{
          notEmpty:{
            message:'请输入商品的价格'
          }
        }
      },
      proDesc:{
        validators:{
          notEmpty:{
            message:'请输入商品描述'
          }
        }
      },
      imgStatu:{
        validators:{
          notEmpty:{
            message:'亲,请上传3张图片'
          }
        }
      },
    }
  })
  
  $("form").on('success.form.bv', function (e) {
    var param = $('form').serialize();
    param += '&picName1='+arr[0].picAddr+'&picAddr1='+arr[0].picName
    param += '&picName2='+arr[2].picAddr+'&picAddr1='+arr[1].picName
    param += '&picName3='+arr[2].picAddr+'&picAddr3='+arr[2].picName

    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      url:'/product/addProduct',
      type:'post',
      data:param,
      success:function(info){
        if(info.success){
          $('#addModal').modal('hide');

          page=1;
          render();

          // 重置表单样式
          $("form").data('bootstrapValidator')
          .resetForm(true)

          //手动重置
          $('.dropdown-text').html('请选择二级分类')
          // 注意!!
          $('.img_box img').remove();
          //坑    数组要清空,否则上传不了了
          arr=[];
        }
      }
    })
});
})